<template>
    <div class="w-full h-500px">
        <div class="w-full h-full" :id="'chinaMapData' + index"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import china from '@/utils/china.json'
import { IRegion } from '@/api/sem/types'

const props = defineProps<{
    data: IRegion[],
    index: number
}>()

echarts.registerMap('china', china as any)


watch(() => props.data, (newVal) => { 
    const maxValue = Math.max(...newVal.map(item => item.value))
    let max = 0
    if(maxValue > 0){
        max = maxValue / 2
    }
    const chartDom = document.getElementById('chinaMapData'+props.index);
    if (chartDom == null) {
        return;
    }
    let myChart = echarts.getInstanceByDom(chartDom);
    // 如果不存在，就进行初始化
    if (myChart == null) {
        myChart = echarts.init(chartDom);
    }

    const option = {
        title: {
            text: '地域分布图',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        visualMap: {
            min: 0,
            max: max,
            left: 'left',
            top: 'bottom',
            text: ['高值', '低值'],
            calculable: true
        },
        series: [
            {
                name: '地域分布',
                type: 'map',
                map: 'china',
                zoom: 1.6,
                center: [104.114129, 37.550339],
                emphasis: {
                    label: { show: true }
                },
                data: newVal
            }
        ]
    }

    myChart.setOption(option)
})

</script>

<style scoped>

</style>